<template>
  <div id="home" class="main">
    <div id="fullpage" ref="container">
      <coverageComponent class="section" :isShow="showList[0]"></coverageComponent>
      <productComponent class="section" :isShow="showList[1]"></productComponent>
      <caseComponent class="section" :isShow="showList[2]"></caseComponent>
      <aboutComponent class="section" :isShow="showList[3]"></aboutComponent>
      <contactComponent class="section" :isShow="showList[4]"></contactComponent>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue';
  import fullpage from '../lib/jquery.fullpage.min.js'
  import coverageComponent from '@/components/home/coverage'
  import productComponent from '@/components/home/product'
  import caseComponent from '@/components/home/case'
  import aboutComponent from '@/components/home/about'
  import contactComponent from '@/components/home/contact'

  export default{
    data () {
      return {
        showList: [] // 控制每个页面动画的显示隐藏
      }
    },
    methods: {
      isIE9: function () {  // 判断是否是ie9
        return (document.all && document.addEventListener && !window.atob);
      },
      initShowList: function () {   // 初始化showList
        this.showList = [];
        let length = document.getElementsByClassName('section').length;
        for (let i = 0; i < length; i++) {
          if (this.isIE9()) {
            Vue.set(this.showList, i, true)
          } else {
            Vue.set(this.showList, i, false)
          }
        }
      }
    },
    created () {
      // destroying
      if (typeof $.fn.fullpage.destroy === 'function') {
        $.fn.fullpage.destroy('all')
      }
      this.$nextTick(function () {
        /* fullpage 配置 */
        const HOMEVUE = this
        this.initShowList() // 初始化控制显示的数组
        $(this.$refs.container).fullpage({
          loopBottom: true, // 底部滚动循环
          loopTop: true, // 顶部滚动循环
          scrollingSpeed: 1500, // 滚动速率
          verticalCentered: false, // 垂直居中
          lazyLoading: true,
          sectionsColor: ['#1c8bf7', '#e5e5e5', '#0079ff', '#005dfe', '#0079ff'], // 设置背景色
          anchors: ['/#coverage', '/#software', '/#center', '/#kerui', '/#follow'], // 锚链接
          navigation: true,
          navigationPosition: 'right',
          navigationTooltips: ['业务', '产品', '案例', '关于', '联系'],
          /* section滑走 */
          onLeave: function (index, nextIndex, direction) {
            if (!HOMEVUE.isIE9()) {  // 如果不是ie9
              let showIndex = index - 1 // fullpage的index从1开始
              Vue.set(HOMEVUE.showList, showIndex, false)
            }
          },
          /* section载入 */
          afterLoad: function (anchorLink, index) {
            if (!HOMEVUE.isIE9()) {  // 如果不是ie9
              let showIndex = index - 1
              // 使用Vue.set方法修改数组（直接赋值无法联动子组件的prop） https://cn.vuejs.org/v2/api/#Vue-set
              Vue.set(HOMEVUE.showList, showIndex, true)
            }
          }
        })
      })
    },
    components: {
      coverageComponent,
      productComponent,
      caseComponent,
      aboutComponent,
      contactComponent
    }
  }
</script>
<style>
  @import "../lib/jquery.fullpage.min.css";
  .component{background-repeat: no-repeat; background-size:cover;background-position: center top; position: relative; }
  .slogen{background-repeat: no-repeat; background-position: center center; height: 80px; position: absolute; top: 20%; width: 100% }
  .ptop{height: 100%; position: relative}
  #fp-nav ul li a span{ background: #fff;}
  #fp-nav ul li a{color: #fff;}
  .fp-controlArrow.fp-prev{left: -100px;}
  .fp-controlArrow.fp-next{right: -100px;}
</style>
